<template>
    <view class="content">
        <view class="header" :style="'background-image: url(' + $c.config.media + 'mini/login_bg.png);'">
            <c-gap height="148rpx" />
            <view class="nav-bar banxin">
                <view><uni-icons type="back" size="24" color="#fff" @tap="$c.jump(1, 5)"></uni-icons></view>
                <view class="title">注册</view>
            </view>
            <c-gap height="46rpx" />
            <view class="banxin">
                <image :src="$c.config.media + 'mini/logo.png'"></image>
            </view>
            <c-gap height="32rpx" />
            <view class="sub-title banxin">完美恋爱从这里开始</view>
        </view>
        <view class="body" :style="'background-image: url(' + $c.config.media + 'mini/loginbg2.png);'">
            <c-gap height="94rpx" />
            <view class="form-box">
                <view class="form-item">
                    <view class="item">
                        <view>
                            <image :src="$c.config.media + 'mini/phone_icon.png'" class="icon"></image>
                            <text class="item-name">手机号</text>
                        </view>
                        <view class="input">
                            <input type="number" placeholder="请输入手机号" v-model="data.phone" />
                        </view>
                    </view>
                    <c-gap height="24rpx" />
                    <view class="item">
                        <view>
                            <image :src="$c.config.media + 'mini/password.png'" class="icon"></image>
                            <text class="item-name">验证码</text>
                        </view>
                        <view class="input">
                            <view><input type="text" placeholder="请输入验证码" v-model="data.code" /></view>

                            <text class="item-name" @tap.stop="getSmsCode()">{{ countDownText }}</text>
                        </view>
                    </view>
                    <c-gap height="24rpx" />
                    <view class="item">
                        <view>
                            <image :src="$c.config.media + 'mini/password.png'" class="icon"></image>
                            <text class="item-name">密码</text>
                        </view>
                        <view class="input">
                            <view>
                                <input type="text" placeholder="请输入密码" v-model="data.password" v-if="show_pass" />
                                <input type="password" placeholder="请输入密码" v-model="data.password" v-else />
                            </view>
                            <view @tap.stop="tapLook()">
                                <image :src="$c.config.media + 'mini/lock2.png'" class="icon" v-if="show_pass" />
                                <image :src="$c.config.media + 'mini/look1.png'" class="icon" v-else />
                            </view>
                        </view>
                    </view>
                    <c-gap height="24rpx" />

                    <c-gap height="106rpx" />
                    <view class="btn" @tap="login">立即注册</view>
                    <c-gap height="48rpx" />

                    <view class="aggre">
                        如果继续，代表您同意

                        <text @tap.stop="$c.jump('/pages/site/richview?url=/apa/protocol&title=协议')">《用户协议》</text>
                        和
                        <text @tap.stop="$c.jump('/pages/site/richview?url=/apa/protocol&title=协议')">《隐私政策》</text>
                        严禁用户通过本APP进行任何不正当或非法活动
                    </view>
                </view>
            </view>
            <c-gap height="54rpx" />
            <view class="to_reg" @tap="toLogin()">
                <view class="mid">
                    <image :src="$c.config.media + 'mini/phone_icon.png'" class="icon"></image>
                    <text class="btn-text">已有账号？点我登录</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            $c: this.$c,
            current: 0,
            swiperHeight: 0,
            data: {
                device: '478ca4671a993355',
                sex: '1',
                nickname: '',
                birthday: '',
                height: '',
                weight: '',
                career: '',
                income: '',
                save_city: '',
                avatar: '',
                phone: '',
                code: '',
                password: '',
                phone_model: 'RMX3366'
            },
            show_pass: false,
            isCountDown: false, // 是否正在倒计时
            countDownText: '发送验证码' // 倒计时文本
        };
    },
    onLoad() {
        this.data = uni.getStorageSync('registerInfo');
    },
    methods: {
        tapLook() {
            this.show_pass = !this.show_pass;
        },
        // 去登录
        toLogin() {
            this.$c.jump('/pages/index/login', 1);
        },
        /**
         * 获取短信验证码
         */
        getSmsCode() {
            console.log(this.isCountDown);
            if (this.isCountDown) return;
            this.$c.sendSms(this.data.phone, 1, (res) => {
                if (!this.isCountDown) {
                }
                this.isCountDown = res[0];
                this.countDownText = res[0] ? res[1] + 's后再发送' : '发送验证码';
            });
        },
        async login() {
            let rule = {
                'phone|手机': 'require|mobile',
                'password|密码': 'require|length:6,20',
                'code|验证码': 'require'
            };
            let res = await this.$c.post('/apa/register', this.data);
            if (res.status === 0) {
                this.$c.show(res.message);
                return;
            }
            uni.setStorageSync('rongcloud_token', res.data.rongcloud_token);
            uni.setStorageSync('token', res.data.token);
            uni.setStorageSync('user', res.data.user);
            uni.removeStorageSync('showTiYan');
            // 开启体验  如果用户市会员了 直接去首页  不是会员 验证门票
            if (res.data.user.is_vip == 1) {
                this.$c.show('注册成功', 'success', 1000, '/pages/home/home', 3);
            } else {
                if (res.data.user.authentication == 1) {
                    this.$c.show('注册成功', 'success', 1000, '/pages/home/home', 3);
                } else {
                    // 注册成功后发消息
                    await this.$c.post('/apa/user/autoSendMessage');
                    this.$c.show('注册成功', 'success', 1000, '/pages/register/join', 3);
                }
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.banxin {
    width: 716rpx;
    margin: 0 auto;
}
.content {
    background: #23202e;
    width: 750rpx;
    background-size: 100%;
    color: #fff;
    .header {
        width: 750rpx;
        height: 500rpx;
        background-size: 750rpx 500rpx;
        //background-repeat: no-repeat;
        background-position: 0 0;
        .nav-bar {
            display: flex;
            font-weight: 550;
            font-size: 34rpx;
            .title {
                margin-left: 290rpx;
            }
        }
        image {
            width: 110rpx;
            height: 60rpx;
            display: block;
            margin-left: 20rpx;
        }
        .sub-title {
            margin-left: 40rpx;
            font-weight: 600;
            font-size: 48rpx;
        }
    }
    .body {
        position: relative;
        z-index: 9;
        top: -50rpx;
        width: 750rpx;
        height: 1234rpx;
        background-size: 750rpx 1234rpx;
        //background-repeat: no-repeat;
        background-position: 0 0;
        .form-box {
            width: 614rpx;
            margin: 0 auto;
            .item {
                .icon {
                    width: 32rpx;
                    height: 32rpx;
                    vertical-align: middle;
                }
                .item-name {
                    color: #fff;
                    vertical-align: middle;
                    margin-left: 20rpx;
                }
                .input {
                    width: 100%;
                    height: 72rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    input {
                        height: 72rpx;
                        line-height: 72rpx;
                        font-size: 28rpx;
                    }

                    border-bottom: 2rpx solid #444444;
                    .icon {
                        margin-right: 20rpx;
                    }
                }
            }
            .pro {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #8674fa;
                font-size: 24rpx;
            }
            .btn {
                width: 452rpx;
                height: 96rpx;
                line-height: 96rpx;
                text-align: center;
                border-radius: 100rpx;
                margin: 0 auto;
                background: #8674fa;
                font-size: 32rpx;
                font-weight: 550;
            }
            .aggre {
                margin: 0 auto;
                width: 604rpx;
                font-size: 24rpx;
                text {
                    color: #8674fa;
                }
                // height: 24rpx;
            }
            .no-user {
                width: 356rpx;
                height: 24rpx;
                display: block;
                margin: 0 auto;
            }
        }
        .to_reg {
            border: 2rpx solid #8674fa;
            width: 670rpx;
            height: 108rpx;
            line-height: 108rpx;
            color: #8674fa;
            margin: 0 auto;
            border-radius: 40rpx;
            .mid {
                width: 400rpx;
                margin: 0 auto;
                .icon {
                    // background-color: #fff;
                    width: 32rpx;
                    height: 32rpx;
                    vertical-align: middle;
                }
                .btn-text {
                    color: #8674fa;
                    vertical-align: middle;
                    margin-left: 20rpx;
                }
            }
        }
    }
}
</style>
